<template>
	<view class="container bg-main pos-r">
		<use-navbar title="登录"></use-navbar>

		<view class="padding-xl dflex-c dflex-flow-c">
			<view class="headimg-box margin-top margin-bottom-xl">
				<image mode="aspectFit" class="headimg border-radius-c" :src="'https://img.shihuashengyi.cn/static/images/user/default.png'"></image>
			</view>

			<!-- 账号密码登录 -->
			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconshouji margin-right"></view>
				<view class="flex1 dflex">
					<input class="border-line padding-sm flex1" type="number" data-key="mobile" maxlength="11"
						v-model="phoneNumber" placeholder="请输入手机号" />
				</view>
			</view>

			<view class="w-full dflex">
				<view class="iconfont iconmima margin-right"></view>

				<view class="dflex flex1 border-line">
					
					<input class="padding-sm flex1" type="text" password 
						v-model="passwd" password placeholder="请输入密码" />

					<view class="pos-r">
						<view class="vertical-line" style="right: calc(100% + 20rpx);"></view>
						<view class="padding-tb-sm ft-dark" @click="toPage('forgot-password')">忘记密码</view>
					</view>
				</view>
			</view>
			
			<view class="dflex w-full margin-top" @click="toRemember">
				<view v-if="isRemember" class="iconfont iconxuanzhongzhuangtai margin-right-xs ft-base"></view>
				<view v-else class="iconfont iconweixuanzhongzhuangtai margin-right-xs"></view>
				<view class="ft-dark-3">
					记住密码
				</view>
			</view>

			<view class="w-full margin-top-xxl">
				<view class="dflex-b border-radius-lg">
					<view class="tac padding-tb-sm flex1 bg-base fs" @click="doLogin">登录</view>
				</view>
			</view>

			<view class="dflex-b w-full margin-bottom-sm ft-dark-4">
				<view class="padding-tb-sm" @click="toPage('register')">立即注册</view>
			</view>
		</view>

	</view>
</template>

<script>
import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber: '',
				passwd:'',
				isRemember:false,
				showProvider:{
					weixin:false,
					qq:false,
					sinaweibo:false,
					xiaomi:false
				}
			}
		},
		onLoad() {
			let temp=uni.getStorageSync("userPwd")
			if(temp){
				this.phoneNumber=temp.username
				this.passwd=temp.password
				this.isRemember=true
			}
		},
		methods: {
			toRemember(){
				this.isRemember=!this.isRemember
			},
			toPage(page){
				uni.hideKeyboard()
				uni.navigateTo({
					url: page
				});
			},
			doLogin(){
				uni.hideKeyboard();
				//验证手机号码
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false;
				}
				uni.showLoading({
					title: '登陆中...'
				})
				
				this.$store.dispatch("user/Login",{
					username:this.phoneNumber,
					password:this.passwd
				}).then(() => {
					if(this.isRemember){
						uni.setStorageSync("userPwd",{
							username:this.phoneNumber,
							password:this.passwd
						})
					}
					this.$store.dispatch('user/GetInfo').then(()=>{
						uni.hideLoading()
						uni.switchTab({
							url:"../tabbar/home"
						})
					})
				}).catch(e=>{
					uni.hideLoading()
				})
			}
		}
	};
</script>

<style lang="scss">
	.headimg-box {
		image {
			width: 130rpx;
			height: 130rpx;
		}
	}

	.login-area {
		view {
			width: 25vw;
		}
	}
</style>
